<!-- 获取菜单数据组件 -->
<template>
  <div>
    <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="height: 100vh"
      :default-active="currentPath"
      @select="changeMenu"
    >
      <!-- 使用递归菜单项组件 -->
      <menu-item 
        v-for="menu in menuData" 
        :key="menu.menuId" 
        :menu="menu"
      ></menu-item>
    </el-menu>
  </div>
</template>

<script>
import { buildTreeMenu } from "@/api/menu";
import MenuItem from "./MenuItem.vue";

export default {
  name: 'MenuComponent',
  components: {
    MenuItem
  },
  data() {
    return {
      selectData:{
        adminId: this.$store.state.adminId,
        menuStatus: '',
      },
      menuData: [],
      currentPath: ''
    };
  },
  methods: {
    getMenuHandler() {
      this.selectData.menuStatus = 0
      buildTreeMenu(this.selectData).then((res) => {
        this.menuData = res.data;
      });
    },
    changeMenu(path) {
      if (this.$route.path !== path) {
        this.$router.push(path);
      }
      this.currentPath = path;
    },
  },
  mounted() {
    this.getMenuHandler();
    this.currentPath = this.$route.path;
  },
};
</script>

<style>
</style>